Downloads
Nessa aula, eu mostrei como construir tokens semânticos no design system, fazendo referência aos tokens primitivos. Expliquei que os tokens semânticos são aqueles que aplicamos diretamente no design, enquanto os tokens primitivos servem como base para referência. Destaquei a importância de manter uma estrutura organizada e acessível, que pode ser separada do Figma, para facilitar a manutenção e evitar alterações destrutivas:
- Tokens Semânticos e Primitivos: Diferença entre tokens semânticos, que são aplicados no design, e tokens primitivos, que servem de referência.
- Template de Tokens: Apresentei melhorias no template que aceleram o processo de construção dos tokens, como a adição automática de hashtags em cores e ajuste de contraste de texto.
- Estrutura de Tokens: Mostrei como criar uma estrutura lógica de tokens para texto, ícones, bordas e fundos, e como isso facilita a manutenção e a aplicação no design.
- Referência aos Tokens Primitivos: Ensinei como fazer referência aos tokens primitivos usando uma sintaxe específica, que permite atualizações globais e evita redundâncias.
- Uso do Template: Ressaltei que o uso do template não é obrigatório, mas traz boas práticas de mercado e facilita o processo de documentação e compartilhamento com o time.
- Criação de Paletas de Cores: Demonstrei como criar rapidamente uma paleta de cores neutras para os modos Light e Dark, utilizando o template.
- Variáveis no Figma: Expliquei como as variáveis são usadas no Figma e como restringir onde elas podem ser aplicadas para maior controle.
- Estrutura de Tokens Semânticos: Detalhei a estrutura que uso no nosso design system, incluindo elementos como Conteúdo, Borda e Background, e como isso se reflete no Figma.
- Modos e Temas: Comentei sobre a possibilidade de criar diferentes modos (Light e Dark) e temas (Default, Fancy, Spatial) no design system, e como isso pode ser gerenciado com variáveis.
- Próximos Passos: Adiantei que na próxima aula vou ensinar como extrair os tokens do spreadsheet e importá-los para o Figma, além de disponibilizar o template para os alunos.
Lembrei que é importante testar e definir as cores e estruturas de tokens antes de aplicá-las no design system, e que na última aula desse módulo vou mostrar como organizar as variáveis e como decidir se elas ficarão no projeto do design system ou externamente.